<template>
  <div id="vueui-login-window">
    <img class="img" src="../../../assets/img/logo_bg.png" alt="" srcset="" />
    <img
      class="img1"
      src="../../../assets/img/logo_index.png"
      alt=""
      srcset=""
    />
    <!-- <div class="block-2" v-show="!configured" @click="clickConfig">
      服务端配置
    </div> -->

    <div class="block-2">
      <img
        src="../../../assets/icon/3.png"
        alt=""
        srcset=""
        @click="clickConfig"
      />

      <img
        class="block-icon"
        src="../../../assets/icon/1.png"
        alt=""
        srcset=""
        @click="minimizeWindow"
      />
      <img src="../../../assets/icon/2.png" alt="" srcset="" @click="close" />
    </div>
    <div class="block-1">
      <div class="logo-text">登录</div>
      <a v-if="!loading">
        <a-form
          ref="loginForm"
          :model="userInfo"
          class="login-form"
          layout="vertical"
          @submit="handleSubmit"
        >
          <div v-if="configured == false">
            <a-form-item
              field="username"
              :rules="[{ required: true, message: '请输入账号' }]"
              :validate-trigger="['change', 'blur']"
              hide-label
            >
              <a-input v-model="userInfo.username" placeholder="请输入账号">
                <!-- <template #prefix>
                  <icon-font type="icon-zhanghao" />
                </template> -->
              </a-input>
            </a-form-item>
            <a-form-item
              field="password"
              :rules="[{ required: true, message: '请输入密码' }]"
              :validate-trigger="['change', 'blur']"
              hide-label
            >
              <a-input-password
                v-model="userInfo.password"
                placeholder="请输入密码"
                allow-clear
              >
                <!-- <template #prefix>
                  <icon-font type="icon-lock" />
                </template> -->
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <a-checkbox-group v-model:value="userInfo.type">
                <a-checkbox value="1" name="type">记住密码</a-checkbox>
              </a-checkbox-group>
            </a-form-item>

            <a-button type="primary" class="logo" html-type="submit">
              登录
            </a-button>
          </div>
          <div v-else class="logo1">
            <a-form-item
              field="username"
              :rules="[{ required: true, message: '请输入网络域名' }]"
              :validate-trigger="['change', 'blur']"
              hide-label
            >
              <a-input v-model="userInfo.username" placeholder="请输入网络域名">
                <!-- <template #prefix>
                <icon-font type="icon-zhanghao" />
              </template> -->
              </a-input>
            </a-form-item>
            <a-form-item
              field="password"
              :rules="[{ required: true, message: '请输入端口号' }]"
              :validate-trigger="['change', 'blur']"
              hide-label
            >
              <a-input
                v-model="userInfo.password"
                placeholder="请输入端口号"
                allow-clear
              >
                <!-- <template #prefix>
                <icon-font type="icon-lock" />
              </template> -->
              </a-input>
            </a-form-item>

            <div class="but">
              <a-button @click="configured = false"> 返 回 </a-button>
              <a-button type="primary" @click="configured = false">
                确 认
              </a-button>
            </div>
          </div>
        </a-form>
      </a>
      <span v-else>{{ loginText }}</span>
    </div>
  </div>
</template>
<script>
import { ipcApiRoute } from "@/utils/ipcMainApi";
import { ipc } from "@/utils/ipcRenderer";
import { readConfig } from "@/utils/getConfig";

export default {
  data() {
    return {
      loading: false,
      loginText: "正在登陆......",
      userInfo: {
        username: "",
        password: "",
        type: 1,
      },
      configured: false,
    };
  },

  methods: {
    close() {
      ipc.invoke(ipcApiRoute.close).then((id) => {});
    },
    minimizeWindow() {
      ipc.invoke(ipcApiRoute.minimize).then((id) => {});
    },

    handleSubmit({ values, errors }) {
      if (!errors) {
        this.loading = true;
        setTimeout(async () => {
          this.$router.push({ name: "Framework", params: {} });
          var { MainWinWidth, MainWinHeight, MainwindowTitle } =
            await readConfig();
          ipc
            .invoke(ipcApiRoute.restoreWindow, {
              width: MainWinWidth,
              height: MainWinHeight,
              windowTitle: MainwindowTitle,
            })
            .then((r) => {});
        }, 1000);
      }
    },
    clickConfig() {
      this.configured = true;
    },
  },
};
</script>
<style lang="less" scoped>
#vueui-login-window {
  position: relative;

  width: 100%;
  min-height: 100%;
  background: var(--color-menu-light-bg);
  display: flex;
  .block-1 {
    font-size: 16px;
    align-items: center;
    margin: auto;
    display: inline-block;
  }
  .img {
    position: relative;
    width: 70%;
    height: 100vh;
    -webkit-app-region: drag; //设置可以拖拽的区域
  }
  .img1 {
    position: absolute;
    top: 60px;
    left: 10%;
    z-index: 999;
  }

  .block-2 {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

.but {
  display: flex;
  justify-content: space-around;
}
.logo {
  width: 100%;
  background: #237dff;
  border-radius: 30px 30px 30px 30px;
}
.logo1 {
  width: 120%;
}
.arco-input-wrapper {
  height: 40px !important;
  border-radius: 6px 6px 6px 6px;
}
.logo-text {
  text-align: left;
  font-weight: 500;
  font-size: 34px;
  color: #333333;
  margin-bottom: 42px;
}
.block-icon {
  margin: 0 5px;
}
</style>
